<template>
  <div class="root">
    <div class="mianbox">
      <Nav></Nav>
    </div>
    <div class="headerBox">
      <div class="leftBox">
        <img
          class="imgBox"
          src="@/assets/image/header/logo.png"
          @click="$router.push('/home')"
          alt=""
        />
        <div class="titleBox">用户管理后台</div>
      </div>
    </div>
    <div class="bigContent">
      <div class="contentBox">
        <div class="topBox">
          <el-steps
            :active="active"
            finish-status="success"
            :align-center="true"
          >
            <el-step title="确认宝贝"></el-step>
            <el-step title="提交订单"></el-step>
            <el-step title="支付订单"></el-step>
            <el-step title="支付成功"></el-step>
          </el-steps>
        </div>
        <el-divider></el-divider>
        <div class="titleBox">收货人信息</div>
        <div class="box" v-if="!show">
          <div class="form">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="auto"
              class="demo-ruleForm"
            >
              <el-form-item label="解析地址：" style="display: flex">
                <el-input v-model="address"></el-input>
                <div class="btnBox" @click="expressAddressResolution">
                  一键解析
                </div>
              </el-form-item>
              <el-form-item label="所在地区：" prop="arrValue">
                <el-cascader
                  v-model="ruleForm.arrValue"
                  :options="options"
                  @change="handleChange"
                  :props="{ value: 'name', label: 'name' }"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="详细地址：" prop="receiverDetailAddress">
                <el-input v-model="ruleForm.receiverDetailAddress"></el-input>
              </el-form-item>
              <el-form-item label="收货人：" prop="receiverName">
                <el-input v-model="ruleForm.receiverName"></el-input>
              </el-form-item>
              <el-form-item label="联系电话：" prop="receiverPhone">
                <el-input v-model="ruleForm.receiverPhone"></el-input>
              </el-form-item>
              <el-form-item label=" ">
                <div class="bitS">
                  <div class="leftBtn" @click="qr">确认</div>
                  <div class="leftBtn rightBtn" @click="collectionAddress">
                    确认并收藏
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="tableBox">
            <div class="tableTitle">
              已收藏地址
              <span class="huiTetx">（您可以使用已收藏的地址） </span>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="receiverName" label="收货人">
              </el-table-column>
              <el-table-column prop="receiverPhone" label="联系电话">
              </el-table-column>
              <el-table-column
                prop="receiverDetailAddress"
                :show-overflow-tooltip="true"
                label="地址"
              >
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="getDz(scope.row)"
                    >选择此地址</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="box" v-else>
          <div class="dizhi">
            {{ ruleForm.receiverName }} - {{ ruleForm.receiverPhone }} -{{
              ruleForm.receiverProvince
            }}
            - {{ ruleForm.receiverCity }} - {{ ruleForm.receiverRegion }} -
            {{ ruleForm.receiverDetailAddress }}
            <el-button
              class="editBtn"
              type="text"
              size="small"
              @click="show = false"
              >修改地址</el-button
            >
          </div>
        </div>
        <el-divider></el-divider>
        <div class="titleBox">商品信息</div>
        <div class="newTableBox">
          <el-table
            :data="shopTable"
            header-cell-class-name="tableHeader"
            style="width: 100%"
          >
            <el-table-column prop="date" label="商品信息" width="400">
              <template slot-scope="scope">
                <div class="shopsData">
                  <img :src="scope.row.productPic" class="newImg" alt="" />
                  <div class="shopsDataBox">
                    <div class="nameBox">{{ scope.row.productName }}</div>
                    <div class="Model">
                      商品货号：{{ scope.row.storeName }}&{{
                        scope.row.productCode
                      }}
                    </div>
                    <!-- <div class="Model">
                      颜色：{{ scope.row.skuData.color }} 尺码：{{ scope.row.skuData.size }}
                    </div> -->
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productPrice" label="单价">
              <template slot-scope="scope"
                >￥{{ scope.row.productPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="规格属性">
              <template slot-scope="scope">
                <div class="price">颜色：{{ scope.row.skuData.color }}</div>
                <div class="price">尺码：{{ scope.row.skuData.size }}</div>
                <el-button
                  style="font-size: 0.14rem"
                  type="text"
                  size="small"
                  @click="getShopData(scope.row.productId)"
                  >修改商品</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="price" label="数量">
              <template slot-scope="scope">
                <el-input-number
                  @change="geiNum"
                  size="mini"
                  :min="0"
                  v-model="scope.row.productQuantity"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="小计">
              <template slot-scope="scope"
                >￥{{ scope.row.productQuantity * scope.row.productPrice }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bomData">
          <div></div>
          <div class="dataBox">
            <div>
              总商品金额： <span class="herzi"> ¥ {{ allPrice }}</span>
            </div>
            <div>
              总服务费：<span class="herzi"> ¥ {{ shopTable.length }}</span>
            </div>
          </div>
        </div>
        <div class="bomBtn">
          <div></div>
          <div class="bifBtn">
            <div class="ddPrice">
              订单实付款：<span class="newPricieBox"
                >¥ {{ allPrice + shopTable.length }}</span
              >
            </div>
            <div class="tjBtn" @click="confirmAddress">提交订单</div>
          </div>
        </div>
      </div>
    </div>
    <bottom></bottom>
    <el-dialog :visible.sync="dialogVisible" width="30%" class="newDialog">
      <div class="DiaLogHeader">
        <div class="titlebOX">修改商品</div>
        <div class="chahao" @click="dialogVisible = false"></div>
      </div>
      <el-divider></el-divider>
      <div style="padding: 20px 40px" class="textBox">
        <div class="sgBpox">
          <span style="margin-right: 0.18rem">身高</span>
          <div
            v-for="(item, index) in shopData.pmsSkuDTOS"
            @click="sizeindex = index"
            :key="index"
            class="newSg"
            :class="{ isacitive: sizeindex == index }"
          >
            {{ item.size }}
          </div>
        </div>
        <div
          class="ysBox"
          v-for="(item, index) in shopData.pmsSkuStocks"
          :key="index"
        >
          颜色
          <img
            :src="item.picture"
            alt=""
            style="margin-left: 0.19rem; width: 0.2rem; height: 0.2rem"
          /><span class="newYs">{{ item.color }}</span
          ><span>{{ item.newSpData[sizeindex].price }}</span>
          <el-input-number
            style="margin-left: 0.3rem"
            v-model="item.newSpData[sizeindex].value"
            :min="0"
            :max="item.newSpData[sizeindex].stock * 1"
            label="描述文字"
            @change="numChange()"
          ></el-input-number>
        </div>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="dialogVisible = false" class="huiBtn">
          取消</el-button
        >
        <el-button
          type="primary"
          class="hongBtn"
          @click="updateSkuDataOrQuantity"
        >
          确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import Nav from "@/components/Nav/Nav";
import bottom from "@/components/bottom";
import {
  expressAddressResolution,
  selectAllAddress,
  collectionAddress,
  selectMemberAddress,
  selectOrderItem,
  getData,
  updateSkuDataOrQuantity,
  confirmAddress,
} from "@/api/shopDetail";
export default {
  components: { Nav, bottom },
  data() {
    const sjhreg =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    const validatesjh = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!sjhreg.test(value)) {
        callback(new Error("请检查手机号码是否正确"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      address: "",
      active: 1,
      ruleForm: {
        address: "",
        receiverDetailAddress:'',
        receiverName:'',
        receiverPhone:'',
        arrValue:[]
      },
      rules: {
        arrValue: [
          { required: true, message: "请选择地区", trigger: "change" },
        ],
        receiverDetailAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        receiverName: [
          { required: true, message: "请输入收货人", trigger: "blur" },
        ],
        receiverPhone: [
        { required: true, validator: validatesjh, trigger: "blur" },
        ],
      },
      options: [],
      tableData: [],
      arrValue: [],
      show: false,
      shopTable: [],
      shopData: {},
      sizeindex: 0,
      tableListB: [],
      allPrice: 0,
    };
  },
  // created() {
  //   this.selectAllAddress();
  //   this.selectMemberAddress();
  //   this.selectOrderItem();
  // },
  created() {
    this.show = false;
    this.selectAllAddress();
    this.selectMemberAddress();
    this.selectOrderItem();
    // let data=localStorage.getItem('data')
    // this.shopTable=JSON.parse(data)
    // console.log(this.shopTable);
  },
  methods: {
    geiNum() {
      this.allPrice = 0;
      this.shopTable.forEach((item) => {
        this.allPrice =
          this.allPrice + item.productQuantity * item.productPrice;
      });
    },
    //提交订单
    confirmAddress() {
      if(this.allPrice==0){
        this.$message({
          message: "请输入需要购买的商品数量",
          type: "warning",
        });
        return false
      }
      if (this.show) {
        let arr=[]
        this.shopTable.forEach(item=>{
          let obj={
            orderItemId:item.id,
            count:item.productQuantity
          }
          arr.push(obj)
        })
        console.log(arr,'dsahj');
        confirmAddress(
          {
            receiverName: this.ruleForm.receiverName,
            receiverPhone: this.ruleForm.receiverPhone,
            receiverProvince: this.ruleForm.receiverProvince,
            receiverCity: this.ruleForm.receiverCity,
            receiverRegion: this.ruleForm.receiverRegion,
            receiverDetailAddress: this.ruleForm.receiverDetailAddress,
            totalAmount: this.allPrice + this.shopTable.length,
            payAmount: this.allPrice,
            orderItemJson:JSON.stringify(arr)
            // freightAmount:1
          },
          this.$route.query.id
        ).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.ruleForm = {};
            this.$router.push({
              path: "/PayOrder",
              query: {
                id: this.$route.query.id,
              },
            });
          }
        });
      } else {
        this.$message({
          message: "请选择收货地址",
          type: "warning",
        });
      }
    },
    //修改订单中的商品
    updateSkuDataOrQuantity() {
      let arr = [];
      this.tableListB.forEach((item) => {
        item.arr.forEach((item1) => {
          arr.push(item1);
        });
      });
      updateSkuDataOrQuantity(
        {
          newSkuData: JSON.stringify(arr),
        },
        this.$route.query.id
      ).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.selectOrderItem();
          this.dialogVisible = false;
        }
      });
    },
    numChange() {
      let num = 0;
      let price = 0;
      let arr = [];
      this.shopData.pmsSkuStocks.forEach((item) => {
        item.newSpData.forEach((item1) => {
          if (item1.value && item1.value > 0) {
            let obj = {
              size: item1.Size,
              quantity: item1.value,
              color: item.color,
              price: item1.price * 1,
            };
            arr.push(obj);
            num = num + item1.value;
            price = price + item1.price * 1 * item1.value;
          }
        });
      });
      let sgArr = [];
      sgArr = JSON.parse(JSON.stringify(this.shopData.pmsSkuDTOS));
      let newArr = [];
      sgArr.forEach((item) => {
        let obj = {
          size: item.size,
          num: 0,
          arr: [],
        };
        newArr.push(obj);
      });
      newArr.forEach((item) => {
        arr.forEach((item1) => {
          if (item1.size == item.size) {
            item.arr.push(item1);
          }
        });
      });
      this.tableListB = [];
      newArr.forEach((item) => {
        if (item.arr.length) {
          let num = 0;
          item.arr.forEach((item1) => {
            num = num + item1.quantity;
          });
          item.num = num;
          this.tableListB.push(item);
        }
      });
      console.log(this.tableListB);
    },
    //获取商品详情
    getShopData(id) {
      getData(id).then((data) => {
        // this.pmsStore(data.data.storeId);
        data.data.pmsSkuStocks.forEach((item) => {
          item.newSpData = [];
        });
        data.data.pmsSkuStocks.forEach((item) => {
          item.spData = JSON.parse(item.spData);
          item.spData.forEach((item1) => {
            let obj = JSON.parse(JSON.stringify(item1));
            let obj2=JSON.parse(obj)
            obj2.value=null
            item.newSpData.push(obj2);
          });
        });
        // data.data.pictureSmall = data.data.pictureSmall.split(",");
        // data.data.pictureSmall.unshift(data.data.pictureOriginal);
        // data.data.intro = data.data.intro.split(",");
        let arr = [];
        arr = JSON.parse(JSON.stringify(data.data.pmsSkuDTOS));
        let num = data.data.pmsSkuDTOS.length / data.data.pmsSkuStocks.length;
        data.data.pmsSkuDTOS = arr.slice(0, num);
        this.shopData = data.data;
        console.log(this.shopData);
        this.shopTable.forEach((item) => {
          this.shopData.pmsSkuDTOS.forEach((item1, index) => {
            if (item.skuData.size == item1.size) {
              this.shopData.pmsSkuStocks.forEach((item2) => {
                if (item.skuData.color == item2.color) {
                  item2.newSpData[index].value = item.productQuantity;
                }
              });
            }
          });
        });
        console.log(this.shopData);
        this.dialogVisible = true;
      });
    },
    //获取订单商品信息
    selectOrderItem() {
      this.allPrice = 0;
      selectOrderItem({
        orderId: this.$route.query.id,
      }).then((data) => {
        console.log(this.allPrice);
        data.data.forEach((item) => {
          this.allPrice =
            this.allPrice + item.productQuantity * item.productPrice;
          item.skuData = JSON.parse(item.skuData);
        });
        this.shopTable = data.data;
      });
    },
    //确认地址
    qr() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.show = true;
        } else {
          return false;
        }
      });
    },
    //选择此地址
    getDz(data) {
      this.ruleForm.receiverName = data.receiverName;
      this.ruleForm.receiverPhone = data.receiverPhone;
      this.ruleForm.receiverDetailAddress = data.receiverDetailAddress;
      this.ruleForm.receiverProvince = data.receiverProvince;
      this.ruleForm.receiverCity = data.receiverCity;
      this.ruleForm.receiverRegion = data.receiverRegion;
      this.ruleForm.arrValue = [
        data.receiverProvince,
        data.receiverCity,
        data.receiverRegion,
      ];
      this.show = true;
    },
    //获取我的地址
    selectMemberAddress() {
      selectMemberAddress().then((data) => {
        this.tableData = data.data;
      });
    },
    //保存地址
    collectionAddress() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          collectionAddress(this.ruleForm).then((data) => {
            this.selectMemberAddress();
            this.show = true;
          });
        } else {
          return false;
        }
      });
    },
    handleChange(val) {
      console.log(val);
      if (val.length) {
        this.ruleForm.receiverProvince = val[0];
        this.ruleForm.receiverCity = val[1];
        this.ruleForm.receiverRegion = val[2];
      }
    },
    //获取省市区地址
    selectAllAddress() {
      selectAllAddress().then((data) => {
        this.options = data.data;
      });
    },
    //解析地址
    expressAddressResolution() {
      if (this.address !== "") {
        expressAddressResolution({
          address: this.address,
        }).then((data) => {
          console.log(data);
          this.ruleForm.receiverName = data.data.name;
          this.ruleForm.receiverPhone = data.data.mobile;
          this.ruleForm.receiverDetailAddress = data.data.detail;
         
          if(data.data.province){
            this.ruleForm.receiverProvince = data.data.province;
          this.ruleForm.receiverCity = data.data.city;
          this.ruleForm.receiverRegion = data.data.district;
            this.ruleForm.arrValue = [
            data.data.province,
            data.data.city,
            data.data.district,
          ];
          }
          
          console.log(this.ruleForm);
        });
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.root {
  background: #fff;
  font-size: 0.12rem;
  .mianbox {
    margin: 0 auto;
    width: 12rem;
    height: 100%;
  }
  .headerBox {
    padding-left: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-bottom: 10px;
    .leftBox {
      display: flex;
      align-items: center;
    }
    .imgBox {
      cursor: pointer;
    }
    .titleBox {
      margin-left: 100px;
      font-size: 24px;
      font-weight: 500;
      color: #444242;
    }
    .queryBox {
      display: flex;
      align-items: center;
      border-radius: 40px;
      width: 4rem;
      background: #ebebeb;
      margin-right: 80px;
      overflow: hidden;
      .leftBox {
        background: #f5f7f9;
        display: flex;
        align-items: center;
        padding: 0 12px;
        font-size: 14px;
        height: 43px;
        line-height: 43px;
        /deep/ .el-icon-search {
          margin-right: 10px;
        }
        /deep/ .el-icon-arrow-down {
          margin-left: 10px;
        }
      }
      /deep/ .el-input__inner {
        border: none;
        background: #ebebeb;
      }
      /deep/ .el-input {
        width: 52%;
      }
      .queryBtn {
        text-align: center;
        background: #e22a1f;
        color: #fff;
        font-size: 16px;
        flex: 1;
        height: 43px;
        line-height: 43px;
        border-radius: 40px;
        cursor: pointer;
      }
    }
  }
  .bigContent {
    background: #f5f7f9;
    padding: 0.2rem 0;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) inset;
  }
  .contentBox {
    width: 60%;
    margin: auto;
    background: #fff;
    border-radius: 4px;
    padding: 0.2rem;
    /deep/ .el-divider {
      margin: 0.2rem 0;
    }
    .topBox {
      /deep/ .el-step__head.is-process {
        color: #fff;
        border-color: #e22a1f;
      }
      /deep/ .el-step__icon.is-text {
        background: #e22a1f;
      }
      /deep/ .el-step__head.is-wait {
        border-color: #e22a1f;
        color: #fff;
      }
      /deep/ .el-step__head.is-success {
        color: #fff;
        border-color: #e22a1f;
      }
      /deep/ .el-step__title.is-success {
        color: #e22a1f;
      }
    }
    .titleBox {
      font-size: 0.16rem;
      font-weight: 700;
    }
    .box {
      display: flex;
      margin-top: 0.2rem;
      justify-content: space-between;
      .dizhi {
        font-size: 0.16rem;
        /deep/ .editBtn {
          font-size: 0.16rem;
        }
      }
      .form {
        width: 50%;
        .btnBox {
          border: 0.01rem solid #e22a1f;
          font-size: 0.16rem;
          color: #e22a1f;
          width: 1rem;
          height: 0.3rem;
          line-height: 0.3rem;
          text-align: center;
          margin-left: 0.1rem;
          cursor: pointer;
        }
        /deep/ .el-form-item__content {
          display: flex;
          align-items: center;
        }
        /deep/ .el-cascader {
          width: 100%;
        }
        .bitS {
          display: flex;
        }
        .leftBtn {
          width: 1rem;
          color: #fff;
          height: 0.3rem;
          line-height: 0.3rem;
          background: #e22a1f;
          border-radius: 0.04rem;
          font-size: 0.16rem;
          text-align: center;
          margin-left: 0.2rem;
          cursor: pointer;
        }
        .rightBtn {
          background: #fff;
          color: #e22a1f;
          border: 0.01rem solid #e22a1f;
        }
      }
      .tableBox {
        width: 48%;
        .tableTitle {
          font-size: 0.16rem;
          margin-bottom: 0.1rem;
          .huiTetx {
            color: #ccc;
          }
        }
      }
    }
    .newTableBox {
      margin-top: 0.2rem;
      /deep/ .tableHeader {
        background: #ebeff5;
        font-weight: 400;
        color: #000;
      }
      /deep/ .el-input--mini .el-input__inner {
        height: auto !important;
      }
      .price {
        color: #666666;
        margin-bottom: 0.1rem;
      }
      .shopsData {
        display: flex;
        .newImg {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .shopsDataBox {
          margin-left: 10px;
          .nameBox {
            font-size: 14px;
          }
          .Model {
            color: #999999;
            margin-top: 8px;
            font-size: 12px;
          }
        }
      }
    }
    .bomBtn {
      display: flex;
      justify-content: space-between;
      margin-top: 0.2rem;
      .bifBtn {
        display: flex;
        align-items: center;
      }
      .ddPrice {
        font-size: 0.16rem;
        .newPricieBox {
          font-size: 0.24rem;
          color: #e22a1f;
          margin-right: 0.2rem;
          font-weight: 700;
        }
      }
      .tjBtn {
        width: 1.2rem;
        height: 0.5rem;
        color: #fff;
        background: #e22a1f;
        text-align: center;
        font-size: 0.18rem;
        line-height: 0.5rem;
        border-radius: 0.24rem;
        cursor: pointer;
      }
    }
    .bomData {
      display: flex;
      justify-content: space-between;
      margin-top: 0.2rem;
      .dataBox {
        font-size: 0.14rem;
        color: #999;
        .herzi {
          color: #000;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
.newDialog {
  /deep/ .el-divider {
    margin: 0px;
  }
  /deep/ .el-dialog__header {
    padding: 0;
  }
  .textBox {
    font-size: 0.2rem;
    // height: 10vh;
    // display: flex;
    // align-items: center;
    .sgBpox {
      font-family: PingFang SC;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 0.24rem;
      border-bottom: 0.01rem solid #e8e8e8;
      padding-bottom: 0.26rem;
      .newSg {
        padding: 0.12rem;
        border: 0.01rem solid #a7adb8;
        margin-right: 0.1rem;
        cursor: pointer;
        margin-bottom: 0.1rem;
      }
    }
    .ysBox {
      font-family: PingFang SC;
      margin-top: 0.15rem;
      font-size: 0.16rem;
      color: #999999;
      display: flex;
      align-items: center;
    }
    .isacitive {
      border: 0.01rem solid #ec6c15 !important;
      color: #ec6c15;
    }
    .newYs {
      font-size: 0.14rem;
      color: #000000;
      margin-left: 0.15rem;
      width: 1.5rem;
    }
    /deep/ .el-input-number .el-input__inner {
      height: auto !important;
    }
  }
  .btnBox {
    display: flex;
    justify-content: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    .btnImg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
    }
    /deep/ .el-button {
      padding: 10px 20px;
    }
  }
  .DiaLogHeader {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
    .titlebOX {
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      text-align: center;
    }
    .chahao {
      width: 20px;
      height: 20px;
      background-image: url("@/static/Imgs/userImg/chahao.png");
      background-size: 100% 100%;
      text-align: center;
      line-height: 20px;
      // color: #e65f00;
      cursor: pointer;
    }
  }
  .Markers {
    display: flex;
    align-items: center;
    .newQizi {
      width: 18px;
      height: 18px;
    }
    /deep/ .el-radio {
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
  }
  /deep/ .huiBtn {
    background: #f5f7f9;
    border-color: #f5f7f9;
    color: #000;
  }
  /deep/ .hongBtn {
    background: #e22a1f;
    color: #fff;
    border-color: #e22a1f;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
  padding-top: 10px;
  padding-bottom: 60px;
}
</style>
  <style scoped lang="scss">
@media screen and (max-width: 1300px) {
  .queryBox {
    width: 6rem !important;
  }
  .contentBox {
    width: 90% !important;
  }
}
</style>
